<template>
 
     <div class="f-bclos f-pa" ref="parentbody" :class="zoomInOut">
        <div class=" lig-top flex-cent">
            <div class="lig-nav " disable>
                <router-link class="nav-box" to="/main/home" tag="button" :disabled="!slip">
                    <div class="nav-icon nav-icon-0"></div>
                    <div class="nav-act"></div>
                </router-link>
                <router-link class="nav-box " to="/main/building" tag="button" :disabled="!slip">
                    <div class="nav-icon nav-icon-1"></div>
                    <div class="nav-act"></div>
                </router-link>
                <router-link class="nav-box "  to="/main/floor" tag="button" :disabled="!slip">
                    <div class="nav-icon nav-icon-2"></div>
                    <div class="nav-act"></div>
                </router-link>
                <router-link class="nav-box" to="/main/set" tag="button" :disabled="!slip">
                    <div class="nav-icon nav-icon-3"></div>
                    <div class="nav-act"></div>
                </router-link>
            </div>
        </div>
        <div class="f-bavg" ref="transBox">
          <transition :name="slideDirection" >
              <keep-alive >
                <router-view></router-view>
              </keep-alive>
          </transition>
        </div>
     </div>

</template>

<script>
export default {
  name: "Main",
  data: function() {
    return {
      tabList: [
        {
          name: "home",
          path: "/main/home"
        },
        {
          name: "building",
          path: "/main/building"
        },
        {
          name: "floor",
          path: "/main/floor"
        },
        {
          name: "set",
          path: "/main/set"
        }
      ],
      slideDirection: "slideforward",
      nowPath: "",
      startX: "",
      startY: "",
      slip:true, //是否滑动
      zoomInOut:"",//页面放大 缩小
    };
  },
  created(){
 
  },
  updated(){
   
  },
  mounted: function() {
    this.nowPath = this.$route.path;
    this.initTouchedEvent();

  },
  methods: {
    touchedstartHandler(e) {
      e.preventDefault();
      
      (this.startX = e.changedTouches[0].pageX),
        (this.startY = e.changedTouches[0].pageY);
    },
    touchendHandler(e) {
      e.preventDefault();
      if (this.slip) {
        let X = e.changedTouches[0].pageX - this.startX;
        let Y = e.changedTouches[0].pageY - this.startY;
        let nowRouteIndex = 0;
        this.tabList.forEach((v, index) => {
          if (v.path == this.nowPath) {
            nowRouteIndex = index;
          }
        });
        if (Math.abs(X) > Math.abs(Y) && X > 0 && nowRouteIndex > 0) {
          //设置向前动画
          this.slideDirection = "slideforward";
          this.$router.push({ path: this.tabList[nowRouteIndex - 1].path });
        }
        if (Math.abs(X) > Math.abs(Y) && X < 0 && nowRouteIndex < this.tabList.length - 1) {
          //设置向后动画
          this.slideDirection = "slideback";
          this.$router.push({ path: this.tabList[nowRouteIndex + 1].path });
        }
      }
    },
    initTouchedEvent() {
      this.$refs.transBox.addEventListener(
        "touchstart",
        this.touchedstartHandler.bind(this)
      );
      this.$refs.transBox.addEventListener(
        "touchend",
        this.touchendHandler.bind(this)
      );
    }
  },
  watch: {
    $route(to, from) {
      this.nowPath = to.path;
    },
    slip(val,oldVal){
      console.log('SKIP---'+val);
    }
  }
}
</script>
<style scoped>
.router-link-exact-active .nav-act {
  background: url("../assets/images/act-0.png") center no-repeat;
  background-size: 100% 100%;
}
.nav-icon-0 {
  background: url("../assets/images/index.png") center no-repeat;
  background-size: 100% 100%;
}
.router-link-exact-active .nav-icon-0 {
  background: url("../assets/images/index-1.png") center no-repeat;
  background-size: 100% 100%;
}
.nav-icon-1 {
  background: url("../assets/images/floor.png") center no-repeat;
  background-size: 100% 100%;
}
.router-link-exact-active .nav-icon-1 {
  background: url("../assets/images/floor-1.png") center no-repeat;
  background-size: 100% 100%;
}
.nav-icon-2 {
  background: url("../assets/images/layer.png") center no-repeat;
  background-size: 100% 100%;
}
.router-link-exact-active .nav-icon-2 {
  background: url("../assets/images/layer-1.png") center no-repeat;
  background-size: 100% 100%;
}
.nav-icon-3 {
  background: url("../assets/images/set.png") center no-repeat;
  background-size: 100% 100%;
}
.router-link-exact-active .nav-icon-3 {
  background: url("../assets/images/set-1.png") center no-repeat;
  background-size: 100% 100%;
}

/* transform */
.slideforward-leave {
  transform: translateX(0);
}
.slideforward-leave-active {
  transition: all 0.5s;
  transform: translateX(0);
}
.slideforward-leave-to {
  transform: translateX(100%);
}
.slideforward-enter {
  transform: translateX(-100%);
}
.slideforward-enter-active {
  transition: all 0.5s;
  transform: translateX(-100%);
}
.slideforward-enter-to {
  transform: translateX(0);
}

.slideback-leave {
  transform: translateX(0);
}
.slideback-leave-active {
  transition: all 0.5s;
  transform: translateX(0);
}
.slideback-leave-to {
  transform: translateX(-100%);
}

.slideback-enter {
  transform: translateX(100%);
}

.slideback-enter-active {
  transition: all 0.5s;
  transform: translateX(100%);
}
.slideback-enter-to {
  transform: translateX(0);
}
</style>




